<template>
    <div class="page-free-product">
        <div class="main">
            <div class="service-box text-normal">
                <ServiceItem type="gift" v-for="(item, aindex) in productSpec" @change="onClickChangePackage(aindex)" :key="aindex" :name="item.attr" :value="showSpec[aindex]" />
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import store from '@/store';
import ServiceItem from '@/features/pkg/serviceItem.vue';
import {
    api,
} from '@/lib/api';
import { Component, Vue } from 'vue-property-decorator';
import { ROUTE_NAME } from '@/lib/constant';
import {
    currency,
} from '@/lib/utils';

@Component({
    name: 'FreeProduct',
    components: {
        ServiceItem,
    },
})
export default class FreeProduct extends Vue {
    public get pkgId() {
        return this.$route.query.pkgId;
    }
    public get orderId() {
        return this.$route.query.orderId;
    }
    public get orderMap() {
        return store.state.manage.orderMap;
    }
    public get productSpecMap() {
        return store.state.manage.productSpecMap;
    }
    public get sureGoodsSpecMap() {
        return store.state.manage.sureGoodsSpecMap;
    }
    public get key() {
        return `${this.pkgId}_${this.orderId}`;
    }
    /** 规格 */
    public get productSpec() {
        return this.productSpecMap[this.key] || [];
    }
    public get sureGoodsSpec() {
        return this.sureGoodsSpecMap[this.key] ? this.sureGoodsSpecMap[this.key] : [];
    }
    public get showSpec() {
        const spec = this.orderMap[Number(this.orderId)].detail.spec;
        return this.productSpec.map((item, index) => {
            const tempItem = [].concat(this.sureGoodsSpec[index]);
            if (spec && spec.length) {
                for (let i = 0; i < spec.length; i++) {
                    if (spec[i].attr === item.attr) {
                        const tempspec = {
                            ...spec[i],
                            value: spec[i].attr_value,
                            price: currency(spec[i].price),
                        };
                        tempItem.unshift(tempspec);
                    }
                }
            }
            return tempItem;
        });
    }

    /**
     * 去调整套餐页
     */
    public onClickChangePackage(aindex: any) {
        // api.navigateTo({
        //     url: '/pages/gift_revision/main',
        //     query: {
        //         order_id: this.orderId,
        //         pkg_id: this.pkgId,
        //         spec_index: '' + aindex,
        //     },
        // });

        api.push({
            name: ROUTE_NAME.MANAGE_GIFT_REVISION,
            query: {
                order_id: this.orderId,
                pkg_id: this.pkgId,
                spec_index: '' + aindex,
            },
        });
    }

    public async created() {
        store.commit('utils/startRequest');
        await Promise.all([
            store.dispatch('manage/getProductSpec', {
                pkgId: this.pkgId,
                orderId: this.orderId,
            }),
        ]);
        store.commit('utils/endRequest');
    }
}
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-free-product {
    min-height: 100%;
    background-color: #f8f8f8;
    .main {
        padding: 10px;
        .service-box {
            border-radius: 5px;
            background-color: @white-color;
        }
    }
}

</style>
